<!DOCTYPE html>
<html lang="en">
<head>
  <title>Test::inputs with hints</title>
  <meta charset="UTF-8">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <script type="text/javascript" src="jquery.min.js"></script>
  <script type="text/javascript">

    // hints appear on typing and disappear on blur
    function displayUsernameHint() {
      $("#usernameHint").show();
    }

    function hideUsernameHint() {
      $("#usernameHint").hide();
    }

    function displayPasswordHint() {
      $("#passwordHint").show();
    }

    function hidePasswordHint() {
      $("#passwordHint").hide();
    }

  </script>
</head>
<body>
<h1>Page with inputs and hints</h1>

<div style="width: 400px">
  <form>
    <fieldset title="Login form">
      <label> Username:
        <input id="username" name="username" value=""
               oninput="displayUsernameHint()"
               onblur="hideUsernameHint()"/>
      </label>
      <div id="usernameHint" style="display: none; color: red; width: 280px; border: 1px solid red;">username hint</div>
      <br/>
      <label>Password:
        <input id="password" name="password" value=""
               oninput="displayPasswordHint()"
               onblur="hidePasswordHint()"/>
      </label>
      <div id="passwordHint" style="display: none">password hint</div>
      <br/>
      <br/>
      <br/>
      <div id="greeting">
        <span class="view"></span>
        <input type="text" style="display: none">
      </div>
      <br/>
    </fieldset>
  </form>
</div>
<script>
  let greeting = 'Dear'
  const greetingContainer = document.querySelector('#greeting');
  const greetingDisplay = greetingContainer.querySelector('span');
  const greetingInput = greetingContainer.querySelector('input');

  greetingDisplay.innerText = greeting;

  function toggleGreetingViewMode() {
    greetingDisplay.innerText = greeting
    greetingInput.style.display = 'none'
    greetingDisplay.style.display = 'inline'
  }

  greetingInput.addEventListener('keyup', (e) => {
    if (e.key === 'Enter') {
      greeting = greetingInput.value
      toggleGreetingViewMode()
    }
    else if (e.key === 'Escape') {
      toggleGreetingViewMode()
    }
  })

  greetingInput.addEventListener('blur', () => {
    toggleGreetingViewMode()
  })

  greetingContainer.addEventListener('dblclick', () => {
    greetingDisplay.style.display = 'none'
    greetingInput.value = greeting
    greetingInput.style.display = 'inline'
    greetingInput.focus()
  })
</script>
</body>
</html>
